<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/le-index.css"/>
    <link rel="icon" href="../../static/img/le-icon.png"/>
    <link href="../../static/layui/css/layui.css" rel="stylesheet">
    <script src="../../static/js-tuangou/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/js-tuangou/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/js-tuangou/paginator.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/js/axios.min.js"></script>
    <title>乐购</title>

</head>
<body>

<!-- nav导航条 -->
<div id="head"></div>

<!-- 搜索框 -->
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">

            <form action="" method="" class="le-search-form" id="le-search-form">
                <div class="form-group form-group-lg">
                    <div class="input-group">
                        <input type="text" name="keyword" id="keyword" class="form-control"
                               placeholder="乐购搜索"/>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-danger btn-lg le-btn" id="le-search-btn">
                                <span class="glyphicon glyphicon-search" style="vertical-align: -3px;"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<!-- banner广告 -->
<div class="container le-banner" id="le-banner">
    <div class="row">
        <div class="col-md-3 hidden-xs hidden-sm">
            <ul class="list-unstyled le-nav-aside">
                <li><a href="">家用电器</a></li>
                <li><a href="">手机 / 运营商 / 数码</a></li>
                <li><a href="">电脑 / 办公</a></li>
                <li><a href="">家居 / 家具 / 家装 / 厨具</a></li>
                <li><a href="">男装 / 女装 / 童装 / 内衣</a></li>
                <li><a href="">美妆 / 个护清洁 / 宠物</a></li>
                <li><a href="">女鞋 / 箱包 / 钟表 / 珠宝</a></li>
                <li><a href="">男鞋 / 运动 / 户外</a></li>
                <li><a href="">房产 / 汽车 / 汽车用品</a></li>
                <li><a href="">母婴 / 玩具乐器</a></li>
                <li><a href="">图书 / 文娱 / 教育 / 电子书</a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div id="carousel-example-generic" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- 轮播图 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img style="height: 415px;"
                             src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7f46857e9876f168ae660dbfb0909169.jpeg?w=2452&h=920">
                    </div>
                    <div class="item">
                        <img style="height: 415px;"
                             src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/69d4b845cf7409fff4ede9bb31e25643.jpg?thumb=1&w=1533&h=575&f=webp&q=90">
                    </div>
                    <div class="item">
                        <img style="height: 415px;"
                             src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66eff8e22a48ded4854017b25cbf631.jpeg?thumb=1&w=1533&h=575&f=webp&q=90">
                    </div>

                </div>

                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </div>
</div>

<!--搜索结果标题-->
<div class="container-fluid hidden" id="le-search-title" style="margin-top: -20px">
    <h3 class="le-header">搜索结果</h3>
</div>

<!--搜索结果内容-->
<div class="container">
    <div class="row" id="le-search-result">
        <!--商品展示示例-->
        <!--        <div class="col-sm-6 col-md-4 col-lg-3">-->
        <!--            <div class="thumbnail center-block">-->
        <!--                <img src="http://img14.360buyimg.com/n7/jfs/t1/215602/32/17523/540419/626011b9E7cf745da/049e458ca4d4141f.jpg">-->
        <!--                <div class="caption">-->
        <!--                    <h5 class="le-price le-text">￥350</h5>-->
        <!--                    <p class="le-title">商品标题</p>-->
        <!--                    <p class="le-shop">商品店铺</p>-->
        <!--                    <a href="" target="_blank" class="btn btn-danger btn-xs le-btn le-buy">热卖商品 火速抢购</a>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
</div>

<!--分页-->
<div class="container text-center">
    <ul class="pagination hidden" id="pagination">
    </ul>
</div>

<!-- header -->
<div class="container-fluid">
    <h3 class="le-header">热卖商品</h3>
</div>

<!-- 热门商品 -->
<div class="container">
    <div class="row hot-products">

    </div>
    <div id="demo-laypage-theme"></div>
</div>

<div class="container-fluid">
    <h3 class="le-header"></h3>
</div>

<!-- footter -->
<div id="foot"></div>

</body>

<script type="application/javascript">
    var currentGoodsList = []; // 用于保存当前展示的商品列表
    var shouldDisplaySearchResults = false; // 用于判断是否应该展示搜索结果，默认为false
    // 分页参数
    var currentPage = 1;
    var pageSize = 12;

    // 当文档加载完成后执行
    $(document).ready(function () {
        $("#head").load("head.html");
        $("#foot").load("foot.html");

        // 初始化分页按钮
        layui.use(function(){
            window.laypage = layui.laypage;
            laypage.render({
                elem: 'demo-laypage-theme',
                count: 0,
                theme: '#c50e1b',
                groups: 8,
                jump: function(obj, first){
                    console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); // 得到每页显示的条数
                    // 首次不执行
                    if(!first){
                        // 判断当前应该展示搜索出来的商品还是全部商品
                        if(shouldDisplaySearchResults){
                            displaySearchResults(currentGoodsList, obj.curr);
                        } else {
                            getGoods(obj.curr, pageSize);
                        }
                    }
                }
            });
        });
        // 获取第一页数据并显示
        getGoods(currentPage, pageSize);

        // 表单提交事件
        $('#le-search-form').submit(function(event) {
            event.preventDefault(); // 阻止表单默认提交
            searchData();
        });

        // 搜索框点击事件
        $('#le-search-btn').click(function() {
            searchData();
        });

        // 搜索框键盘事件监听
        $('#keyword').keypress(function(e){
            if(e.which == 13){
                searchData();
            }
        });

        function searchData() {
            var searchCriteria = {};
            searchCriteria.title = $('#keyword').val().trim();
            if(searchCriteria.title != ''){
                currentGoodsList = [];
                shouldDisplaySearchResults = true;
                getGoodsList(1, 12, searchCriteria);
            } else {
                shouldDisplaySearchResults = false;
                getGoods(1, 12);
            }
        }
    });

    // 显示搜索结果
    function displaySearchResults(goodsList, page){
        var start = (page-1) * pageSize;
        var end = Math.min(page * pageSize, goodsList.length);
        var displayGoodsList = goodsList.slice(start, end);
        displayGoods(displayGoodsList);
    }

    // 发送Axios请求获取数据
    function getGoods(page, size) {
        axios.get('/main/goods/search/' + page + '/' + size)
            .then(function (response) {
                // 处理响应数据
                window.goodsList = response.data.data.list;
                window.totalPages = Math.ceil(response.data.data.total / pageSize); //向上取整
                laypage.render({
                    elem: 'demo-laypage-theme',
                    count: totalPages * 10,
                    theme: '#c50e1b',
                    groups: 8,
                    curr: currentPage,
                    jump: function(obj, first){
                        console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); // 得到每页显示的条数
                        // 首次不执行
                        if(!first){
                            currentPage = obj.curr;
                            getGoods(currentPage, pageSize);
                        }
                    }
                });
                displayGoods(goodsList);
            })
            .catch(function (error) {
                // 处理错误
                console.error(error);
            });
    }

    // 获取商品集
    function getGoodsList(page, size, searchCriteria){
        axios.post('/main/goods/search/' + page + '/' + size, searchCriteria)
            .then(function (response) {
                // 处理响应数据
                window.goodsList = response.data.data.list;
                window.totalPages = Math.ceil(response.data.data.total / pageSize); //向上取整
                laypage.render({
                    elem: 'demo-laypage-theme',
                    count: totalPages * 10,
                    theme: '#c50e1b',
                    groups: 8,
                    curr: currentPage,
                    jump: function(obj, first){
                        console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); // 得到每页显示的条数
                        // 首次不执行
                        if(!first){
                            currentPage = obj.curr;
                            getGoodsList(currentPage, pageSize, searchCriteria);
                        }
                    }
                });
                displayGoods(goodsList);
            })
            .catch(function (error) {
                // 处理错误
                console.error(error);
            });
    }

    // 显示商品
    function displayGoods(goodsList) {
        currentGoodsList = goodsList; // 保存当前展示的商品列表
        var productContainer = document.querySelector('.hot-products');
        productContainer.innerHTML = ''; // 清空原有商品信息

        goodsList.forEach(function (good) {
            let url = '';
            url = 'le-details.html?gid=' + good.gid;

            var productDiv = document.createElement('div');
            productDiv.className = 'col-sm-6 col-md-4 col-lg-3';

            var thumbnailDiv = document.createElement('div');
            thumbnailDiv.className = 'thumbnail center-block';

            var img = document.createElement('img');
            img.src = good.url;
            thumbnailDiv.appendChild(img);

            var captionDiv = document.createElement('div');
            captionDiv.className = 'caption';

            var h5 = document.createElement('h5');
            h5.className = 'le-price le-text';
            h5.textContent = '￥' + good.price;
            captionDiv.appendChild(h5);

            var pTitle = document.createElement('p');
            pTitle.className = 'le-title';
            pTitle.textContent = good.title;
            captionDiv.appendChild(pTitle);

            var pShop = document.createElement('p');
            pShop.className = 'le-shop';
            pShop.textContent = good.shop;
            captionDiv.appendChild(pShop);

            var a = document.createElement('a');
            a.href = url;
            a.target = '_blank';
            a.className = 'btn btn-danger btn-xs le-btn le-buy';
            a.textContent = '热卖商品 火速抢购';
            captionDiv.appendChild(a);

            productDiv.appendChild(thumbnailDiv);
            thumbnailDiv.appendChild(img);
            thumbnailDiv.appendChild(captionDiv);
            productContainer.appendChild(productDiv); // 将商品添加到指定的 div 块中
        });
    }
</script>
</html>
